<script >
export default {
  data() { 
    return {
      msg: ["Su", "Tang", "Xue"],
      json: [
        {
          bname: "歼击",
          href: "https://novel.snssdk.com",
          bookSourceType:"0"
        },
        {
          bname: "歼击1",
          href: "https://www.baidu.com/",
          bookSourceType:"1"
        },
        {
          bname: "歼击2",
          href: "https://www.baidu.com/",
          bookSourceType:"2"
        },
      ],
      obj: {
        name: "SuXue",
        age: 18,
        gender:"女"
      }
    }
  }
}
</script>

<template>
 <p>列表渲染</p>
 <hr>

<div>
  <!-- 数组 -->
  <p v-for="item of msg">{{ item }}</p>
  <hr>

  <!-- json数据 -->
  <p v-for="item of json">{{ item }}</p>
  <hr>
  <p v-for="item of json">{{ item.bname }}</p>
  <hr>
  <p v-for="item of json">{{ item.bname }}-{{ item.bookSourceType }}-{{ item.href }}</p>
  <hr>


  <div v-for="item of json">
    <p>{{ item.bname }}:{{ item.href }}</p>
  </div>
  <hr>

  <div v-for="(key,value) of obj">
  <p>{{ key }}:{{ value }}</p>
  </div>
  <hr>


</div>

</template>


